import React from 'react'
// ===================================================================== data
// ===================================================================== Temp
import Table from '#cpt/temp/Table'
import TableControls from '#cpt/temp/TableControls'
import FormModal from '#cpt/temp/FormModal'
// ===================================================================== global declare
const { $fn, $Lazy } = window
// ===================================================================== Lazy
const Page		= $Lazy.load(()=>import('#tp/page/page-container'))
const $cache 	= $Lazy.file(()=>import('#private/cache-api'))
const data 		= $Lazy.file(()=>import('./data/list.json'))
// ===================================================================== component
class Index extends React.Component{
	state = {
		data:[],
		// 提交表单列表
		formData : [
			{ label: '功能名称',		name: 'page', 		full:true, disabled:true },
			{ label: '关联模板',		name: 'model_name', full:true, required:true, type:'select', idStr:'model_name', nameStr:'model_name' },
		]
	}
	
	model = {}
	
	componentDidMount(){
		this.fetch()
	}
	
	// 获取弹框下拉
	getModalSelect = async () => {
		const { formData } = this.state
		$fn.setModalRows(formData, [ 'model_name' ], ()=>{
			$cache.then( async f => {
				// 关联模板
				$fn.setRow(formData, 'model_name', await f.getCache({ api: 'export_template' }))
				//
				this.setState({ formData })
			})
		})
	}
	
	// paging
	fetch = async ()=>{
		let _data = await $fn.dataSave('export-template-set')
		if(!$fn.hasArray(_data)){
			data.then(f => {
				this.setState({ data: f.data })
				$fn.dataSave('export-template-set',  f.data)
			})
		}else{
			this.setState({ data: _data })
		}
	}
	
	// 表单
	cols = [
		{ title: '序号', 			dataIndex: 'id', 			width:80 },
		{ title: '模块', 			dataIndex: 'model', 		width:200 },
		{ title: '分组', 			dataIndex: 'group', 		width:200 },
		{ title: '功能名称', 		dataIndex: 'page', 			width:200 },
		{ title: '关联导出模板', 	dataIndex: 'model_name', 	width:200 },
		TableControls.controls.call(this,{width:80})
	]
	// 表格操作按钮
	table_controls = (text,{ page, model_name }) => {
		return [
			TableControls.click.call(this, '编辑', async () => {
				this.modal.open({formRef:this.formRef})
				await this.getModalSelect()
				this.formRef.setValue({ page, model_name })
			} ),				// 编辑
		]
	}
	
	render(){
		return (
			<>
				<Page title='导出模板设置'>
					<div className='h10'></div>
					{/* 表格 */}
					{ Table.call(this, { idStr:'id'}) }
				</Page>
				{/* 编辑 */}
				{ FormModal.call(this,{ title:'设置导出模板', width:450, onSubmit: ({ page, model_name }, close)=>{
					const { data } = this.state
					data.forEach(v => {
						if(v.page === page){ v.model_name = model_name }
					})
					this.setState({ data },()=>{
						$fn.dataSave('export-template-set',  data)
					})
					close()
				}})}
			</>
		)
	}
}

export default Index